<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="getTitle" width="650" @ok="handleSubmit" destroyOnClose>
    <BasicForm @register="registerForm" >
      <template #upgrade="{ model, field }">
        <a-row :gutter="24">
          <a-col :sm="24" >
            <InputNumber v-model:value="upgrade.expendMoney" addon-before="实际消费金额满" addon-after="元" />
          </a-col>
          <a-col :sm="24" class="mt-1" >
            <InputNumber v-model:value="upgrade.experience" addon-before="所需成长值"/>
          </a-col>
        </a-row>
      </template>

      <template #equityConsumeDiscount="{ model, field }">
        <InputNumber 
          v-model:value="model[field]" 
          addon-after="折" 
          min="0" max="10"
          :step="0.1"
          :precision="1"
        />
      </template>

      <template #equityPointFeedback="{ model, field }">
        <InputNumber 
          v-model:value="model[field]" 
          addon-after="倍" 
          min="0" max="10"
          :step="0.1"
          :precision="1"
        />
      </template>
    </BasicForm>
  </BasicDrawer>
</template>
<script lang="ts" setup name="UserForm">
import {computed, ref, unref, useAttrs} from 'vue';
import {BasicForm, useForm} from '/@/components/Form/index';
import {formSchema} from './data';
import {BasicDrawer, useDrawerInner} from '/@/components/Drawer';
import {getLevelDetails, saveOrUpdateLevel} from '/@/api/member/level.api';
import {InputNumber} from 'ant-design-vue';

const emit = defineEmits(['success', 'register']);
  const attrs = useAttrs()
  const isUpdate = ref(true);
  const rowId = ref('');

  const memberLevel = ref<any>({})
  // 升级条件
  const upgrade = ref<any>({
    expendMoney: 1000,
    experience: 0
  })

  const [registerForm, {setProps,resetFields, setFieldsValue, validate, updateSchema}] = useForm({
    labelWidth: 120,
    schemas: formSchema,
    showActionButtonGroup: false,
    wrapperCol: {lg: 24, sm: 24} 
  });
  
  const [registerDrawer, {setDrawerProps, closeDrawer}] = useDrawerInner(async (data) => {
    console.timeEnd('user-drawer')
    await resetFields();
    let showFooter = data?.showFooter ?? true
    setDrawerProps({ confirmLoading: false, showFooter })
    isUpdate.value = !!data?.isUpdate;
    if (unref(isUpdate)) {
      setDrawerProps({ loading: true })
      try {
        rowId.value = data.record.id;
        try {
          memberLevel.value = await getLevelDetails({id: data.record.id});
          const levelUpgrade =  memberLevel.value.upgrade || {} 
          upgrade.value.expendMoney = levelUpgrade.expendMoney || 1000
          upgrade.value.experience = levelUpgrade.experience || 0

          memberLevel.value.equityConsumeDiscount = memberLevel.value.equityConsumeDiscount || 0.0
          memberLevel.value.equityPointFeedback = memberLevel.value.equityPointFeedback || 0.0
        } catch (error) {
        }
        setFieldsValue({ ...memberLevel.value })
      } finally {
        setDrawerProps({ loading: false })
      }
    }

    setProps({ disabled: !showFooter })
  });

  const getTitle = computed(() => (!unref(isUpdate) ? '新增会员等级' : '编辑会员等级'));


  async function handleSubmit() {
    try {
      let values = await validate();
      setDrawerProps({confirmLoading: true});

      const form = { ...values, upgrade: unref(upgrade)}
      await saveOrUpdateLevel(form, unref(isUpdate));

      closeDrawer();
      emit('success', {isUpdate: unref(isUpdate), values: {...values, id: rowId.value}});
    } finally {
      setDrawerProps({confirmLoading: false});
    }
  }
</script>
